<template>
  <div class="pass">
    <div class="findPass">
      <div>
        <div>1</div>
        <div>重置密码</div>
      </div>
      <div>></div>
      <div :class="show == 2 ? 'active' : ''">
        <div>2</div>
        <div>重置成功</div>
      </div>
    </div>
    <div class="pass-input" v-show="show == 1">
      <div class="li">
        <div>手机号</div>
        <input type="text" v-model="account" placeholder="请输入手机号码" />
      </div>
      <div class="li li-yzm">
        <div>验证码</div>
        <input type="text" v-model="captcha" placeholder="请输入验证码" />
        <div v-if="disabled">{{text}}</div>
        <div v-else @click="code">{{text}}</div>
      </div>
      <div class="li">
        <div>新密码</div>
        <input type="password" v-model="password" placeholder="请输入新密码" />
      </div>
      <div class="li">
        <div>确认密码</div>
        <input type="password" v-model="password2" placeholder="请再次输入密码" />
      </div>
    </div>
    <div class="pass-success" v-show="show == 2">
      <img :src="$global.Image.icon_success" alt="" />
      <div>密码重置成功</div>
      <div>请牢记您的账号密码</div>
    </div>
    <div class="td-fcc" v-if="show == 1">
      <div class="btn-ok" @click="_submit">确定</div>
      <div class="btn-ok btn-b" style="margin-left: 40px;" @click="$router.go(-1)">返回</div>
    </div>
    <div class="btn-ok" v-else @click="toLogin">立即登录</div>
    <div style="height:400px;"></div>
  </div>
</template>

<script>
import sendVerifyCode from "@mixins/SendVerifyCode";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import {
  registerReset,
  registerVerify,
  getUserInfo,
  getCodeApi
} from "@api/user";
import { VUE_APP_API_URL } from "@utils";

export default {
  name: "FindPassword",
  props: {},
  data() {
    return {
      show: 1,
      account: "",
      captcha: "",
      keyCode: "",
      codeUrl: "",
      codeVal: "",
      isShowCode: false
    };
  },
  mixins: [sendVerifyCode],
  mounted() {
    this.getCode();
    document.addEventListener("keyup", this.enterKey);
  },
  methods: {
    // 监听回车
    enterKey(event) {
      const code = event.keyCode
          ? event.keyCode
          : event.which
              ? event.which
              : event.charCode;
      if (code == 13) {
          this._submit();
      }
    },
    getCode() {
      getCodeApi()
        .then(res => {
          this.keyCode = res.data.key;
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    },
    async _submit() {
      let that = this;
      const { account, password, password2, captcha, codeVal } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号")),
              alpha_num(alpha_num.message())
            ],
            password: [
              required(required.message("密码")),
              attrs.range([6, 16], attrs.range.message("密码")),
              alpha_num(alpha_num.message("密码"))
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ],
            codeVal: this.isShowCode
              ? [
                  required(required.message("验证码")),
                  attrs.length(4, attrs.length.message("验证码")),
                  alpha_num(alpha_num.message("验证码"))
                ]
              : []
          })
          .validate({ account, password, captcha, codeVal });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      if (password !== password2) return that.$dialog.error("两次密码不一致");
      registerReset({
        account: that.account,
        captcha: that.captcha,
        password: that.password,
        code: that.codeVal
      })
        .then(res => {
          that.show = 2
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    async code() {
      let that = this;
      const { account, codeVal } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号码")),
              chs_phone(chs_phone.message())
            ]
          })
          .validate({ account, codeVal });
      } catch (e) {
        return validatorDefaultCatch(e);
      }

      registerVerify({ phone: account, key: that.keyCode, code: that.codeVal })
        .then(res => {
          that.$dialog.success(res.msg);
          that.sendCode();
        })
        .catch(res => {
          if (res.data.status === 402) {
            that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
            that.isShowCode = true;
          }
          that.$dialog.error(res.msg);
        });
    },
    toLogin () {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #DA213D;
.pass {
  width: 530px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .findPass {
    display: flex;
    height: 38px;
    align-items: center;
    width: 530px;
    margin: 84px auto;
    justify-content: center;
    > div:nth-of-type(1) {
      display: flex;
      height: 38px;
      align-items: center;
      > div:nth-of-type(1) {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        background: $color;
      }
      > div:nth-of-type(2) {
        padding-left: 8px;
        color: #da213d;
        font-size: 14px;
        font-weight: 600;
      }
    }
    > div:nth-of-type(2) {
      padding: 0 24px;
      font-size: 20px;
      color: #999999;
    }
    > div:nth-of-type(3) {
      display: flex;
      height: 38px;
      align-items: center;
      > div:nth-of-type(1) {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 50%;
        color: #666666;
        font-size: 16px;
        background: #dbdbdb;
      }
      > div:nth-of-type(2) {
        padding-left: 8px;
        color: #666666;
        font-size: 14px;
        font-weight: 600;
      }
    }
    .active {
      > div:nth-of-type(1) {
        color: #fff !important;
        background: $color !important;
      }
      > div:nth-of-type(2) {
        color: #da213d !important;
      }
    }
  }
  .pass-input {
    .li {
      width: 100%;
      display: flex;
      height: 40px;
      align-items: center;
      margin-bottom: 24px;
      > div:nth-of-type(1) {
        width: 64px;
        color: #666666;
        font-size: 15px;
        text-align: right;
      }
      input {
        width: 450px;
        height: 40px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
        padding-left: 16px;
        margin-left: 16px;
        border-radius: 4px;
      }
      ::placeholder {
        color: #000000;
        opacity: 0.25;
      }
      > div:nth-of-type(2) {
      }
    }
    .li-yzm {
      input {
        width: 338px;
      }
      > div:nth-of-type(2) {
        width: 96px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #da213d;
        color: #da213d;
        font-size: 14px;
        margin-left: 16px;
        cursor: pointer;
      }
    }
  }
  .pass-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 70px;
      height: 70px;
    }
    > div:nth-of-type(1) {
      color: rgba(51, 51, 51, 1);
      font-size: 22px;
      text-align: center;
      font-family: MicrosoftYaHei;
      padding: 30px 0 10px;
    }
    > div:nth-of-type(2) {
      color: rgba(102, 102, 102, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      padding-bottom: 29px;
    }
  }
  .btn-ok {
    background: $color;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    font-size: 18px;
    margin-top: 16px;
    cursor: pointer;
  }
}
</style>
